<template>
    <div class="ranklist-detail">
        <div class="player">
           <img :src="rankInfo.picUrl" alt="">
           <span>{{rankInfo.title}}</span>
           <span>{{rankInfo.titleDetail}}</span>
            <span>更新时间:{{updataTime}}</span>
            <van-button type="primary">播放</van-button>
        </div>
        <div class="ranklist">
            <ul>
                <li v-for="(item,id) in rankList" :key="item.id" @click="selectSong(item)">
                   <span>{{id+1}}.{{item.name}}</span>
                    <span>{{item.singerName}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data(){
        return{
            rankList:[],
            rankInfo:{},
            updataTime:""
        }
    },
    created(){
        this.getData()
    },
    methods:{
        getData(){
            axios.get("/jsososo/top",{
                params:{
                    id:this.$route.params.id
                }
            })
            .then(res=>{
                console.log(res.data)
                this.rankList=res.data.data.list
                this.rankInfo=res.data.data.info
                this.updataTime=res.data.data.update
            })
            .catch(err =>{
                console.error(err);
            })
        },
        selectSong(item){
            this.$store.commit("setSinger",item)
            const id=item.mid
            this.$router.push({path:`/player/${id}`})
         }
    }
}
</script>
<style scoped>
  .player img{
      width: 50%;
      border-radius: 1rem;
  }
  .player span{
      display: block;
  }
  .ranklist li{
      text-align: left;
  }
  .ranklist span{
      display: block;
  }
</style>